<template>
  <div class="content-info">
    <LabelTitle text="常用工具"></LabelTitle>
    <div class="rightbtnp" @click="showConfig">
      <!-- <img class="pz" src="../../../assets/images/pz.png" />配置 -->
    </div>
    <div class="content-box mt10">
      <div class="nav-item" :key="index">
        <div class="img-box" @click="showConfig">
          <el-icon color="#2263BF" style="opacity: 0.25"><Plus /></el-icon>
        </div>
        <p class="navname">更多</p>
      </div>
      <div
        class="nav-item"
        v-for="(item, index) in navList"
        :key="index"
        @click="jump(item)"
      >
        <div class="img-box">
          <img class="img" :src="item.icon" />
        </div>
        <p class="navname">{{ item.name }}</p>
      </div>
    </div>
  </div>
  <!-- 新增 -->
  <SelfDialog
    :dialogVisable="addVisable"
    title="编辑常用应用"
    @close="confirmAdd(1)"
    @confirm="confirmAdd(2)"
  >
    <template #default>
      <div class="center_content-box">
        <div class="rightbtn-del" @click="clearCheckbox">
          <!-- <img class="del" src="../../../assets/images/del.png" /> -->
          一键清空
        </div>
        <el-checkbox-group v-model="form.checkList">
          <div v-for="(item, index) in allNav" :key="index">
            <p class="title-checkbox">{{ item.name }}</p>
            <el-checkbox
              :label="nav.id"
              v-for="nav in item.children"
              :value="nav.id"
              :key="nav.id"
              >{{ nav.name }}</el-checkbox
            >
          </div>
        </el-checkbox-group>
      </div>
    </template>
  </SelfDialog>
</template>

<script setup>
import LabelTitle from '@/components/labeltitle.vue';
import SelfDialog from '@/components/dialog/dialog.vue';
import { TabbarList } from '@/pinia/tabbar.js';
let piniaTab = TabbarList();
import { onMounted } from 'vue';
import spdy from '@/assets/images/spdy.png';
import sjcz from '@/assets/images/sjcz.png';

let navList = ref([
  // {
  //   name: "视频调阅",
  //   icon: spdy,
  //   url: "/video-player",
  //   id: "1-1",
  // },
  {
    name: '事件列表',
    path: '/eventlist',
    icon: spdy,
    meta: {
      hidden: false,
      title: '',
    },
  },
]);

// 全部应用选择
let addVisable = ref(false);
let form = ref({
  checkList: [],
});
let allNav = ref([
  {
    name: '视频中心',
    icon: 'iconfont icon-shipinchakan',
    url: '/video-player',
    id: '1',
    children: [
      {
        name: '视频调阅',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '1-1',
      },
    ],
  },
  {
    name: '事件中心',
    icon: 'iconfont icon-shipinchakan',
    url: '/video-player',
    id: '2',
    children: [
      {
        name: '事件列表',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '2-1',
      },
      {
        name: '事件处置',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '2-2',
      },
    ],
  },
  {
    name: '一张图',
    icon: 'iconfont icon-shipinchakan',
    url: '/video-player',
    id: '3',
    children: [
      {
        name: '街道总览',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '3-1',
      },
      {
        name: '预警事件',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '3-2',
      },
      {
        name: '动态街情',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '3-3',
      },
      {
        name: '治理场景',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '3-4',
      },
      {
        name: '建设资源',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '3-5',
      },
      {
        name: '数据资产',
        icon: 'iconfont icon-shipinchakan',
        url: '/video-player',
        id: '3-6',
      },
    ],
  },
]);
// 展示全部
const showConfig = () => {
  navList.value.forEach((element) => {
    form.value.checkList.push(element.id);
  });
  addVisable.value = true;
};
// 编辑常用
const confirmAdd = (type) => {
  if (type === 1) {
    addVisable.value = false;
  } else {
    addVisable.value = false;
  }
};

// 清除全部
const clearCheckbox = () => {
  form.value.checkList = [];
};

const getData = async () => {
  try {
  } catch (e) {
    console.error(e);
  }
};

const jump = (item) => {
  piniaTab.add(item);
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  .rightbtnp {
    position: absolute;
    right: 0;
    top: 1px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2263bf;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      margin-right: 8px;
    }
  }
  .content-box {
    height: calc(100% - 40px);
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    overflow: auto;
    padding: 23px 10px 23px 10px;
    .nav-item {
      display: inline-block;
      vertical-align: top;
      width: 90px;
      margin: 0 24px;
      cursor: pointer;
      .img-box {
        width: 90px;
        height: 100px;
        background: rgba(45, 155, 252, 0.12);
        border-radius: 12px;
        text-align: center;
        font-size: 30px;
        padding-top: 30px;
        .img {
          width: 31.5px;
          height: 31.5px;
        }
      }
      .navname {
        margin: 7px 0;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
    }
  }
}
.center_content-box {
  padding: 0px 19px 20px 37px;
  position: relative;
  .rightbtn-del {
    right: 20px;
    top: -18px;
    position: absolute;
    display: flex;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-size: 14px;
    color: #2263bf;
    cursor: pointer;
    img {
      margin-right: 3px;
    }
  }
  .title-checkbox {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    margin-top: 15px;
  }
}
</style>
